<template>
  <div class="tab-cont">
    <custom-title name="待办任务列表" />
    <el-table :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" width="45" />
      <el-table-column label="ID" align="center" prop="id" sortable show-overflow-tooltip />
      <el-table-column label="流程名称" align="center" prop="instanceName" sortable show-overflow-tooltip />
      <el-table-column label="任务节点名称" align="center" prop="name" show-overflow-tooltip />
      <el-table-column label="任务状态" align="center" prop="status" show-overflow-tooltip />
      <el-table-column label="办理人" align="center" prop="assignee" show-overflow-tooltip />
      <el-table-column label="创建时间" align="center" prop="createdDate" width="140px" />
      <el-table-column label="操作" align="center" prop="name" width="80px">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleInfo(row)">办理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-if="list.length" :current-page="form.pageNum" :total="total" :page-size="form.pageSize" @changeData="getTasks" />
    <el-dialog title="表单详情" :visible.sync="dialogForm" width="80%" @closed="handleFormSubmit">
      <VFormDesigner ref="vfDesignerRef" :designer-config="designerConfig" :global-dsv="globalDsv" @handleFormSubmit="handleFormSubmit" />
    </el-dialog>
  </div>
</template>

<script>
import VFormDesigner from '@/components/form-designer/index.vue'
import { getTasks } from '@/api/process'
export default {
  components: {
    VFormDesigner,
  },
  data() {
    return {
      form: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      list: [],
      dialogForm: false,
      designerConfig: {
        resetFormJson: false,
        toolbarMaxWidth: 490,
      },
      //全局数据源变量
      globalDsv: {
        testApiHost: 'http://www.test.com/api',
        testPort: 8080,
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getTasks()
    })
  },
  methods: {
    // 列表复选框操作
    handleSelectionChange(item) {
      console.log(item)
    },
    // 列表操作
    handleInfo(row) {
      sessionStorage.setItem('typ', 'detail')
      sessionStorage.setItem('businessKey', 'prcess_1')
      sessionStorage.setItem('instTaskID', row.id)
      setTimeout(() => {
        this.dialogForm = true
      }, 500)
    },
    renderTime(date) {
      const dateee = new Date(date).toJSON();
      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
    judgeState(state) {
      let stateText=''
      if(state == 'ASSIGNED'){
        stateText='执行中'
      }else {
        stateText = state
      }
      return stateText
    },
    handleFormSubmit() {
      sessionStorage.removeItem('typ')
      sessionStorage.removeItem('instTaskID')
      this.dialogForm = false
      this.getTasks()
    },
    // 获取待办列表
    async getTasks(item) {
      this.form.pageNum = item && item.pageNum ? item.pageNum : 1
      this.form.pageSize = item && item.pageSize ? item.pageSize : 10
      const { status, obj } = await getTasks(this.form)
      if (status === 0) {
        obj.list.forEach((x) => {
          x.createdDate = this.renderTime(x.createdDate)
          x.status = this.judgeState(x.status)
        })
        this.list = obj.list
        this.total = obj.totalNum
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>